<template>
  <div>
    <p>订单管理</p>
    <div class="headers">
      <div class="dings">
        <p class="dan">订单类型:</p>
      </div>
      <div class="aaa">
        <el-select v-model="value" class="m-2" placeholder="请选择" size="large">
          <el-option
            @click="select(item)"
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
      </div>
      <div class="dings">
        <p class="dan">搜索:</p>
      </div>
      <div class="aaa">
        <input
          class="inp"
          type="text"
          placeholder="   请输入手机号/用户名/订单号"
          v-model="inp"
        />
      </div>
      <div>
        <button class="but" @click="search">查询</button>
      </div>
    </div>

    <div class="table">
      <!-- 表格 -->
      <el-table :data="selectList" stripe style="width: 100%">
        <el-table-column prop="id" label="序号" width="300" />
        <el-table-column prop="create_time" label="订单编号" width="150" />
        <el-table-column prop="mobile" label="用户名" width="100" />
        <el-table-column prop="phone" label="手机号" width="100" />
        <el-table-column prop="type" label="类型" width="90" />
        <el-table-column prop="payment" label="支付金额" width="180" />
        <el-table-column prop="uid" label="支付时间" width="220" />
        <el-table-column fixed="right" label="操作" width="150">
          <template #default="scope">
            <el-button link type="primary" size="small" @click="handleClick(scope.row)"
              >查看</el-button
            >
          </template>
        </el-table-column>
      </el-table>
      <el-dialog v-model="dialogFormVisible" title="Shipping address">
        <el-form :model="form">
          <el-form-item label="序号" :label-width="formLabelWidth">
            <el-input v-model="form.id" autocomplete="off" />
          </el-form-item>
          <el-form-item label="订单编号" :label-width="formLabelWidth">
            <el-input v-model="form.ding" autocomplete="off" />
          </el-form-item>
          <el-form-item label="用户名" :label-width="formLabelWidth">
            <el-input v-model="form.name" autocomplete="off" />
          </el-form-item>
          <el-form-item label="手机号" :label-width="formLabelWidth">
            <el-input v-model="form.phone" autocomplete="off" />
          </el-form-item>
          <el-form-item label="类型" :label-width="formLabelWidth">
            <el-input v-model="form.type" autocomplete="off" />
          </el-form-item>
          <el-form-item label="支付金额" :label-width="formLabelWidth">
            <el-input v-model="form.newhouse" autocomplete="off" />
          </el-form-item>
          <el-form-item label="支付时间" :label-width="formLabelWidth">
            <el-input v-model="form.date" autocomplete="off" />
          </el-form-item>
        </el-form>
        <template #footer>
          <span class="dialog-footer">
            <el-button @click="dialogFormVisible = false">Cancel</el-button>
            <el-button type="primary" @click="dialogFormVisible = false">
              Confirm
            </el-button>
          </span>
        </template>
      </el-dialog>
      <el-pagination
        @size-change="sizeChange"
        @current-change="currentChange"
        layout="total,prev, pager, next"
        :total="total"
        :current-page.sync="currentPage"
        :page-sizes="[10, 20, 30, 40]"
        :page-size="pageSize"
      >
      </el-pagination>
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, onMounted, reactive } from "vue";
import { GET_ORDER } from "@/api/api.js";
import list from "@/utils/Mock.js";

const dialogTableVisible = ref(false);
const dialogFormVisible = ref(false);
const formLabelWidth = "140px";


const form = ref({
  id: "",
  name: "",
  ding: "",
  phone: "",
  type: "",
  newhouse: "",
  date: "",
});


GET_ORDER().then((res) => {
   console.log(res);
   tableData.value=res.data.data
}).catch((err) => {
   
});




onMounted(() => {
});




const value = ref("");
// 渲染
const tableData = ref([...list]);
// 查看
const handleClick = (arr) => {
  console.log("click");
  dialogFormVisible.value = true;
  form.value = arr;
};

// 以下搜索内容
const inp = ref();
const inpss = ref([]);
onMounted(() => {
  tableData.value = inpss.value = list;
});

// 搜索
const search = () => {
  tableData.value = inpss.value.filter((item) => {
    if (inp.value) {
      return item.name == inp.value || item.phone == inp.value || item.ding == inp.value;
    } else {
      item;
    }
  });
};
const selectList = ref(tableData);
// 下拉框点击
const select = (item: any) => {
  console.log(item);

  let arr: any = [];
  tableData.value.forEach((value, index) => {
    if (value.type === item.label) {
      arr.push(value);
    }
    selectList.value = arr;
  });
};

// '二手房出售','有房出租','房屋出租','求租','求购','我想买个房','我想租个房'
const options = [
  {
    value: "二手房出售",
    label: "二手房出售",
  },
  {
    value: "有房出租",
    label: "有房出租",
  },
  {
    value: "我想找个房",
    label: "我想找个房",
  },
  {
    value: "我想租个房",
    label: "我想租个房",
  },
];
</script>
<style scoped lang="scss">
.headers {
  width: 100%;
  height: 2.5rem;
  display: flex;
  margin-top: 20px;
  margin-bottom: 20px;

  .dings {
    width: 7%;
    height: 2.5rem;
  }

  .dan {
    font-size: #ccc;
    font-size: 15px;
    line-height: 35px;
  }

  .aaa {
    width: 25%;
    height: 2.5rem;
    // background: palegreen;
  }

  .inp {
    width: 80%;
    height: 38px;
    border: #ccc;
    border-radius: 4px;
    border: 1px solid #e4dfdf;
  }

  .but {
    width: 50px;
    height: 25px;
    color: #fff;
    background: #afaeae;
    border: none;
    margin-top: 8px;
    cursor: pointer;
  }

  .table {
    margin-top: 20px;
  }
}
</style>
